<!DOCTYPE html>
<html lang="zh-cn" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="referrer" content="origin-when-crossorigin"/>
    <meta name="description" content="学习无涯"/>
    <meta property="og:description" content="学习无涯"/>
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>AlwaysLearning - Gantt Chart</title>
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="./css/pintuer-2.0.custom.min.css"/>
    <link rel="stylesheet" href="./css/gantt-chart.css"/>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/pintuer-2.0.min.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/echarts.js"></script>
    <script src="./js/xlsx.full.min.js"></script>
  </head>
  <body>
    <!-- 时间选择器（模板文件）start -->
    <template id="time-picker-template">
      <div v-bind:style="styleValue">
        <span style="position: absolute;">{{ timeText }}</span>
        <div style="display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center;">
          <span>
            <label v-on:click="changeYear(-1)">-</label>
            <span style="border: solid 1px">{{ new Date(time).getFullYear() }}</span>
            <label v-on:click="changeYear(1)">+</label>
            <select v-model="month" v-on:change="onMonthChange($event)">
              <option v-for="i in months" v-bind:value="i">{{ (i + 1) + '月' }}</option>
            </select>
          </span>
        </div>
        <div style="display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between;">
          <span v-for="weekday in weekdays" style="border: solid 1px; width: 2em; height: 2em; display: flex; justify-content: center; align-items: center;">{{ weekday }}</span>
        </div>
        <div v-for="row in dateMatrix" style="display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between;">
          <span v-for="date in row" v-on:click="onDateChange(date)" v-bind:style="'width: 2em; height: 2em; display: flex; justify-content: center; align-items: center;' + (date === d ? 'background-color: #bebec1; color: #FFFFFF;' : '')">{{ date === 0 ? '' : date }}</span>
        </div>
        <div style="display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between;">
          <button v-on:click="onClosePicker()">确定</button>
          <button v-on:click="onClosePicker()">取消</button>
        </div>
      </div>
    </template>
    <!-- 时间选择器（模板文件）end -->
  
    <!-- 颜色选择器（模板文件）start -->
    <template id="color-picker-template">
      <div v-bind:style="styleValue">
        <div>当前颜色：</div>
        <div style="display: flex; place-content: center space-between;">
          <span>
            <div>
              R: 
              <label v-on:click="onColorChangeClick('R', -1)" style="user-select: none;">-</label>
              <input v-model="r" style="width: 3em;" />
              <label v-on:click="onColorChangeClick('R', 1)" style="user-select: none;">+</label>
            </div>
            <div>
              G: 
              <label v-on:click="onColorChangeClick('G', -1)" style="user-select: none;">-</label>
              <input v-model="g" style="width: 3em;" />
              <label v-on:click="onColorChangeClick('G', 1)" style="user-select: none;">+</label>
            </div>
            <div>
              B: 
              <label v-on:click="onColorChangeClick('B', -1)" style="user-select: none;">-</label>
              <input v-model="b" style="width: 3em;" />
              <label v-on:click="onColorChangeClick('B', 1)" style="user-select: none;">+</label>
            </div>
          </span>
          <span style="width: 50%; display: flex; place-content: center;">
            <div>
              <div>
                <span v-bind:style="'display: block; width: 5em; height:5em; background-color:' + colorHex"></span>
              </div>
              <input v-bind:value="colorHex" v-on:change="onColorHexChange($event)" style="width: 5em;" />
            </div>
          </span>
        </div>
        <div style="display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between;">
          <button v-on:click="onClosePicker()">确定</button>
          <button v-on:click="onClosePicker()">取消</button>
        </div>
      </div>
    </template>
    <!-- 颜色选择器（模板文件）end -->
  
    <main class="layout container">
      <!-- 时间选择器（隐藏状态）start -->
      <time-picker ref="timePicker"></time-picker>
      <!-- 时间选择器（隐藏状态）end -->
      <!-- 颜色选择器（隐藏状态）start -->
      <color-picker ref="colorPicker"></color-picker>
      <!-- 颜色选择器（隐藏状态）end -->
      <!-- 确认对话框（隐藏状态）start -->
      <div class="dialog" id="import-confirm">
        <div class="dialog-body dialog-content">
          <div class="dialog-text">导入数据成功后将会覆盖当前甘特图数据，确认执行导入操作吗？</div>
          <div data-confirm="dialog" class="dialog-confirm">确定</div>
          <div data-dismiss="dialog" class="dialog-cancel">取消</div>
        </div>
      </div>
      <!-- 确认对话框（隐藏状态）end -->
      <!-- 任务修改对话框（隐藏状态）start -->
      <div class="dialog" id="task-dialog">
        <div class="dialog-body">
          <div>
            任务名称：<input v-model="taskEdition.name" placeholder="任务名称" class="input" />
          </div>
          <div>
            开始时间：<label v-on:click="pickStartDate" class="input">{{ undefined === taskEdition.startTimeText ? '点击选择任务开始日期' : taskEdition.startTimeText }}</label>
          </div>
          <div>
            结束时间：<label v-on:click="pickEndDate" class="input">{{ undefined === taskEdition.endTimeText ? '点击选择任务结束日期' : taskEdition.endTimeText }}</label>
          </div>
          <div>
            颜色选择：
            <label v-on:click="pickColor" class="input">
              {{ undefined === taskEdition.color ? '点击选择任务颜色' : taskEdition.color }}
              <span v-if="undefined !== taskEdition.color" v-bind:style="'background-color:'+taskEdition.color" class="colorBlock"></span>
            </label>
          </div>
          <div>
            <button v-on:click="saveTask">确定</button>
            <button v-on:click="closeTaskEditModal">取消</button>
          </div>
        </div>
      </div>  
      <!-- 任务修改对话框（隐藏状态）end -->
      <h1>甘特图制作工具</h1>
      <div class="input-panel">
        <div>甘特图标题</div>
        <input v-model="title" placeholder="甘特图标题" class="input" />
      </div>
      <div class="flex flex-between operations">
        <div class="flex flex-start">
          <button v-on:click="openTaskCreateModal" class="button">添加任务</button>
        </div>
        <div class="flex flex-end">
          <button v-on:click="openImportConfimation()" class="button" style="margin-right: 1em;">导入任务数据</button>
          <button v-on:click="exportTasks()" class="button">导出Excel</button>
        </div>
      </div>
      <div>
        <table class="table table-striped">
          <tr class="align-center">
            <th>任务名称</th>
            <th>开始时间</th>
            <th>结束时间</th>
            <th>颜色</th>
            <th>操作</th>
          </tr>
          <tr class="date-row align-left" v-for="task in tasks" v-bind:key="task.id">
            <td class="font-monospace">{{ task.name }}</td>
            <td class="font-monospace">{{ task.startTimeText }}</td>
            <td class="font-monospace">{{ task.endTimeText }}</td>
            <td class="font-monospace"><span v-bind:style="'background-color:'+task.color" class="colorBlock"></span></td>
            <td>
              <button v-on:click="openTaskUpdateModal(task.id)">修改</button>
              <button v-on:click="deleteTask(task.id)" class="text-danger">删除</button>
              <button v-on:click="move(task.id, 1)">上移↑</button>
              <button v-on:click="move(task.id, 2)">下移↓</button>
            </td>
          </tr>
        </table>    
      </div>
      <div class="error-message">{{ errMsg }}</div>
      <div id="gantt-chart" style="width: 100%;"></div>
    </main>
  </body>
  <script src="./js/time-picker.js"></script>
  <script src="./js/color-picker.js"></script>
  <script src="./js/gantt-chart.js"></script>
</html>
